import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image, 
  ImageBackground,TouchableOpacity,
  Easing,Dimensions,TextInput
} from 'react-native';
import Toast, {DURATION} from 'react-native-easy-toast'
import MyButton from '../component/MyButton'
import {jumpPage} from '../common/common'
import {BASEURL} from '../api/api'
const {height, width} = Dimensions.get('window');
const dismissKeyboard = require('dismissKeyboard');
export default class Register extends Component{
  static navigationOptions = ({ navigation }) =>{
    return{
      title:'注册',
      headerRight:(<View></View>),
      headerLeft:(<TouchableOpacity onPress={()=>{navigation.pop()}}><Image source={require('../images/reg/icon_close.png')} 
        style={{marginLeft:10,width:16,height:16}}/></TouchableOpacity>)
    }
  };
  constructor(props){
    super(props);
    this.state = ({
      tel: '',
      password: '',
      password2: '',
    })
  }
  _goLogin(){
    jumpPage(this.props.navigation,'login');
  }
  change(val, type){
    if(type == 'tel'){
      this.setState({
        tel: val,
      })
    }
    if(type == 'password'){
      this.setState({
        password: val,
      })
    }
    if(type == 'password2'){
      this.setState({
        password2: val,
      })
    }
  }
  register(){
    dismissKeyboard();
    let {tel, password, password2} = this.state;
    //console.log(password);
    if(!tel){
      this.refs.toast.show("请输入手机号");
      return;
    } else if(tel.length != 11){
      this.refs.toast.show("请输入正确的手机号");
      return;
    } else if(!password){
      this.refs.toast.show("请输入密码");
      return;
    } else if(password.length < 6){
      this.refs.toast.show("密码长度不得少于6位");
      return;
    } else if(!password2){
      this.refs.toast.show("请再次输入密码");
      return;
    } else if(password != password2){
      this.refs.toast.show("两次输入的密码不一致");
      return;
    } else {
      fetch(BASEURL+'register?tel='+tel+'&password='+password)
      .then(res => res.json())
      .then(result=>{
        //console.log(result);
        if(result.succ == '1'){
          this.refs.toast.show("注册成功，请登录");
          setTimeout(()=>{
            this._goLogin();
          },1000);
        } else if(result.succ == '2'){
          this.refs.toast.show("该手机号已被注册");
        } else if(result.succ == '0'){
          this.refs.toast.show("注册失败");
        }
      })
    } 
  }
  render(){
    return(
      <View style={styles.container}>
        <View style={{height:10}}></View>
        <View style={styles.inputViewStyle}>
          <Input iconImgStyle={{width:14,height:20}} imgIcon={require('../images/reg/reg_tel.png')} placeholder='手机号' 
            keyboardType="numeric" onChange={(val)=>{this.change(val,'tel')}}/>
          {/* <Input iconImgStyle={{width:17,height:19}} imgIcon={require('../images/reg/vali_code.png')} 
            placeholder='验证码' rigthText='获取验证码'/> */}
          <Input iconImgStyle={{width:16,height:22}} imgIcon={require('../images/reg/reg_pwd.png')} placeholder='请填写密码' onChange={(val)=>{this.change(val,'password')}}/>
          <Input iconImgStyle={{width:16,height:22}} imgIcon={require('../images/reg/pwd_again.png')} 
            style={{borderBottomWidth:0}} placeholder='请再次填写密码' onChange={(val)=>{this.change(val,'password2')}}/>
        </View>
        <MyButton btnStyle={{marginTop:90}}  text='注 册' press={()=>this.register()}/>
        <View style={styles.regView}>
          <Text style={{color:'#888'}}>已有账号，进行</Text><Text style={styles.loginText} onPress={()=>this._goLogin()} hitSlop={{top: 10, left: 5, bottom: 10, right: 5}}> 登录</Text>
        </View>
        <Toast ref="toast" position='bottom' positionValue={200} />
      </View>
    )
  }
}
class Input extends Component{
  render(){
    return(
      <View style={[styles.inputView,this.props.style]}>
        <Image style={this.props.iconImgStyle} source={this.props.imgIcon} />
        <TextInput 
          ref={this.props._ref}
          placeholder={this.props.placeholder}
          style={styles.searchInput}
          underlineColorAndroid="transparent"
          onChangeText={this.props.onChange}
          value={this.props.val}
          returnKeyType='search'
          placeholderTextColor='#aaa'
          keyboardType={this.props.keyboardType}
        />
        {this.props.rigthText?
          <TouchableOpacity style={styles.codeBtn} activeOpacity={0.6}>
            <Text style={{color:'white',fontSize:12,}}>获取验证码</Text>
          </TouchableOpacity>
          :null}
      </View>
    )
  }
}
const styles = StyleSheet.create({
  loginText:{
    color:'blue',
  },
  inputViewStyle:{
    backgroundColor:'white',
  },
  regView:{
    marginTop:20,
    marginBottom:30,
    flexDirection:'row',
    justifyContent:'center',
  },
  codeBtn:{
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#3366CC',
    height:32,
    paddingLeft:10,
    paddingRight:10,
    borderRadius:16,
  },
  regBtn:{
    justifyContent: 'center',
    alignItems: 'center',
    marginTop:90,
    marginLeft:40,
    marginRight:40,
    backgroundColor:'#D0BB8E',
    height:40,
    borderRadius:18,
  },
  iconImg:{
    width:20,
    height:20,
  },
  searchInput:{
    marginLeft:15,
    padding:0,
    flex:1,
    height: 40, 
  },
  inputView:{
    height:50,
    width:width-40,
    flexDirection:'row',
    alignItems:'center',
    marginLeft:20,
    marginRight:20,
    borderBottomColor:'#eee',
    borderBottomWidth:1,
    //borderWidth:1,
    //borderColor:'white',
  },
  container: {
    flex: 1,
    backgroundColor:'#F2F2F2',
  },
  logView:{
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom:20,
  },
})